<template>
  <div>
    <el-dialog title="确认记录" :visible.sync="dialogVisible3" width="60%" center
      appendToBody
    >
      <el-table :data="approvetable" stripe style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="hash.certnum" label="证书编号"></el-table-column>
        <el-table-column label="修正因子">
          <template slot-scope="scope">
            <div v-html="scope.row.hash.factor">{{scope.row.hash.factor}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="hash.upload_time" label="提交时间"></el-table-column>
        <el-table-column prop="hash.verifiy_project" label="检测项目"></el-table-column>
        <el-table-column label="量值">
          <template slot-scope="scope">
            <div v-html="scope.row.hash.measurement">{{scope.row.hash.measurement}}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.hash.status=='-1'" style="color:red">被驳回</span>
            <span v-if="scope.row.hash.status=='0'">确认人未提交</span>
            <span v-if="scope.row.hash.status=='1'">确认人已提交</span>
            <span v-if="scope.row.hash.status=='2'">审核人批准</span>
            <span v-if="scope.row.hash.status=='3'">批准人批准</span>
          </template>
        </el-table-column>
        <el-table-column prop="hash.confirm_personname" label="确认人"></el-table-column>
        <el-table-column label="查看附件">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="checkfj2(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="showshdata(scope.row)">确认记录</el-button>
            <el-button size="mini" type="danger" @click="deleterecord(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title :visible.sync="innerVisible33" appendToBody width="95%"
        top="0" center
      >
        <el-row :gutter="40">
          <el-col :span="12">
            <el-button type="primary" size="small" style="margin-bottom:5px" @click="doprint">打印</el-button>
            <div id="printrecord">
              <div>
                <p style="display:flex;justify-content:flex-end">
                  <span style="margin-right:20px;font-size:16px">JBR/QR31-2</span>
                </p>
                <div
                  style="height:50px;line-height:50px;font-size:20px;text-align:center;font-weight:600;color:#333"
                >检定/校准结果确认记录</div>
                <div class="tablediv">
                  <span style="border-bottom:0">仪器名称</span>
                  <span
                    style="border-left:0;border-right:0;border-bottom:0;font-size:13px"
                  >{{shrecordData.ep_ename}}</span>
                  <span style="border-bottom:0">仪器型号</span>
                  <span style="border-left:0;border-bottom:0">{{shrecordData.scale}}</span>
                </div>
                <div class="tablediv">
                  <span style="border-bottom:0">仪器编号</span>
                  <span
                    style="border-left:0;border-right:0;border-bottom:0"
                  >{{shrecordData.managenum}}</span>
                  <span style="border-bottom:0">使用部门</span>
                  <span style="border-left:0;border-bottom:0">{{shrecordData.confirm_org}}</span>
                </div>
                <div class="tablediv">
                  <span style="width:25%;border-bottom:0">校定/校准单位</span>
                  <span
                    style="width:75%;border-left:0;border-bottom:0"
                  >{{shrecordData.verifiy_company}}</span>
                </div>
                <div class="tablediv">
                  <span style="width:25%;border-bottom:0">校定/校准证书编号</span>
                  <span style="width:75%;border-left:0;border-bottom:0">{{shrecordData.certnum}}</span>
                </div>
                <div class="tablediv">
                  <span style="width:25%;height:auto;border-bottom:0">确认依据</span>
                  <span
                    class="span"
                    style="width:75%;line-height:25px;text-align:center;white-space:pre;height:auto;border-left:0;border-bottom:0;"
                    v-if="shrecordData.confirm_basis"
                  >
                    <b>{{shrecordData.confirm_basis.replace(/##/g,"\n")}}</b>
                  </span>
                  <span
                    style="width:75%;line-height:50px;white-space:pre;height:auto;border-left:0;border-bottom:0;"
                    v-else
                  >
                    <b>暂无依据</b>
                  </span>
                </div>

                <div class="tablediv">
                  <span style="width:100%;padding:20px;height:100%;min-height:45vh;border-bottom:0">
                    <p style="height:40px;line-height:40px;text-align:left">确认情况：</p>
                    <div
                      class="tabledata"
                      v-html="shrecordData.confirm_content"
                    >{{shrecordData.confirm_content}}</div>
                  </span>
                </div>
                <div class="tablediv">
                  <span style="width:25%;line-height:50px;;border-right:0">结论</span>
                  <span style="width:75%;line-height:50px">{{shrecordData.confirm_conclusion}}</span>
                </div>
              </div>
              <div
                style="display:flex;justify-content:space-around;line-height:40px;margin-top:20px"
              >
                <span>
                  确认：
                  <img
                    :src="shrecordData.confirm_person_signature"
                    height="40"
                    v-if="shrecordData.confirm_person_signature!=''"
                  />
                </span>
                <span>
                  审核：
                  <img
                    :src="shrecordData.check_person_signature"
                    height="40"
                    v-if="shrecordData.check_person_signature!=''"
                  />
                </span>
                <span>
                  批准：
                  <img
                    :src="shrecordData.approval_person_signature"
                    height="40"
                    v-if="shrecordData.approval_person_signature!=''"
                  />
                </span>
                <span>批准日期：{{shrecordData.confirm_time}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <p style="line-height:50px;font-size:20px;">附件列表</p>
            <div class="demo-image__preview" v-for="fit in fileArr2" :key="fit">
              <div
                v-if="fit.hash.fileurl.split('.').pop()=='jpg'||fit.hash.fileurl.split('.').pop()=='png'"
              >
                <el-image style="width: 100%" :src="fit.hash.fileurl"></el-image>
              </div>
              <div v-else-if="fit.hash.fileurl.split('.').pop()=='pdf'" style="margin:30px 0">
                <a href="#">{{fit.hash.filename}}</a>
                <viewpdf :pdfUrl="fit.hash.fileurl"></viewpdf>
              </div>
              <div v-else style="margin:30px 0">
                <a :href="fit.hash.fileurl" download>{{fit.hash.filename}} 下载</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-dialog>
      <el-dialog title="查看附件" :visible.sync="innerVisible44" appendToBody>
        <el-table :data="fileArr2" stripe style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="hash.filename" label="附件名称"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a :href="scope.row.hash.fileurl" target="_blank" download>下 载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import viewpdf from '~/components/common/viewpdf.vue';

export default {
  components: {
    viewpdf,
  },
  data() {
    return {
      ts: this.newStore(),
      dialogVisible3: true,
      innerVisible33: false,
      innerVisible44: false,
      innerVisible55: false,
      shrecordData: {
        confirm_person_signature: '',
        check_person_signature: '',
        approval_person_signature: '',
        confirm_content: '',
      },
      fileArr2: [],
      previewSrcList: [],
      itemid: '',
    };
  },
  props: {
    approvetable: {
      type: Array,
      required: true,
    },
  },
  methods: {
    deleterecord(item) {
      console.log(item);
      this.itemid = item.hash.vid;
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const req = {
            handle:
              'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7A5F19BF53A145FF90F343C67DB4C9E2A3BFF0B9210751F692',
            id: item.hash.id,
          };
          this.spost(this.ts, '/mainservlet', req).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.$parent.showdia(0, this.itemid);
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    doprint() {
      this.$nextTick(() => {
        const detailContent = document.getElementById('printrecord');
        Print('#printrecord');
      });
    },
    checkfj2(item) {
      console.log(item);
      const req = {
        handle:
          'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7AF1087BC5FD3B20C51F0C438E24ECDA3C',
        id: item.hash.cid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.fileArr2 = ts.d.data.operation1;
        this.innerVisible44 = true;
      });
    },
    showshdata(item) {
      this.previewSrcList = [];
      const req = {
        handle:
          'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7AF1087BC5FD3B20C5526704B7BEE1B46A',
        id: item.hash.id,
      };
      const req2 = {
        handle:
          'DD5D108B99FC12B782127AB5198E65DA50B1E3C352635A7AF1087BC5FD3B20C51F0C438E24ECDA3C',
        id: item.hash.cid,
      };
      this.spost(this.ts, '/mainservlet', req2).then((ts) => {
        console.log(item, 'item');
        console.log(ts.d.data.operation1, 'ts.d.data.operation1');
        this.fileArr2 = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d.data.operation1, 'ts.d.data.opertions2');
        this.shrecordData = ts.d.data.operation1[0].hash;
        this.shrecordData.confirm_content = this.shrecordData.confirm_content.substr(
          0,
          this.shrecordData.confirm_content.length - 20,
        );
      });
      this.innerVisible33 = true;
    },
  },
};
</script>

<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  display: inline-block;
}
.tablediv {
  display: flex;
  justify-content: space-around;
}
.tablediv span {
  border: 1px solid #333;
  display: inline-block;
  width: 25%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.span{
  line-height: 25px!important;
}
</style>
